<template>
  <div class="oj-navbar">
    <div class="oj-navbar-menus">
      <img class="oj-navbar-logo" src="@/assets/logo.png" />
      <el-menu router class="oj-navbar-menu" mode="horizontal">
        <el-menu-item index="/home/question">题库</el-menu-item>
        <el-menu-item index="/home/exam">竞赛</el-menu-item>
      </el-menu>
    </div>
    <div class="oj-navbar-users">
      <img
        v-if="isLogin"
        class="oj-message"
        @click="goMessage"
        src="@/assets/message/message.png"
      />
      <el-dropdown v-if="isLogin">
        <div class="oj-navbar-avatar">
          <img
            class="oj-head-image"
            v-if="isLogin"
            :src="userInfo.headImage || defaultAvatar"
            :alt="userInfo.nickName"
          />
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="goUserDetail">
              <div class="oj-navabar-item">
                <span>个人中心</span>
              </div>
            </el-dropdown-item>
            <el-dropdown-item @click="goMyExam">
              <div class="oj-navabar-item">
                <span>我的竞赛</span>
              </div>
            </el-dropdown-item>
            <el-dropdown-item>
              <div class="oj-navabar-item">
                <span @click="handleLogout">退出登录</span>
              </div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <span class="oj-navbar-login-btn" v-if="!isLogin" @click="goLogin">登录</span>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import router from '@/router'
import { getToken } from '@/utils/cookie'
import { logoutService, getUserInfoService } from '@/apis/user'
import { useUserStore } from '@/stores'
import defaultAvatar from '@/assets/user/head_image.png'

const userStore = useUserStore()

const isLogin = ref(false)

// 使用 computed 来响应式地获取 store 中的用户信息
const userInfo = computed(() => userStore.userInfo)

async function checkLogin() {
  if (getToken()) {
    const userInfoRes = await getUserInfoService()
    userStore.setUserInfo(userInfoRes.data)
    isLogin.value = true
  }
}
checkLogin()

function goLogin() {
  router.push('/login')
}

function goMyExam() {
  router.push('/home/user/exam')
}

function goUserDetail() {
  router.push({
    path: '/home/user/detail',
    query: { from: router.currentRoute.value.path }
  })
}

function goMessage() {
  router.push('/home/user/message')
}

async function handleLogout() {
  await ElMessageBox.confirm('确认退出', '温馨提示', {
    confirmButtonText: '确认',
    cancelButtonText: '退出',
    type: 'warning'
  })
  await logoutService()
  userStore.removeToken()
  isLogin.value = false
}
</script>

<style lang="scss" scoped>
.oj-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
  background: transparent; /* 与滚动条背景色保持一致 */

  max-width: 1520px;
  margin: 0 auto;

  .oj-navbar-menus {
    display: flex;
    align-items: center;
    height: 60px;

    .el-menu-item {
      font-family:
        PingFangSC,
        PingFang SC;
      font-weight: 400;
      font-size: 20px;
      color: #222222;
      line-height: 60px;
      text-align: center;
      width: 42px;
      text-align: left;
      margin-right: 25px;
    }
  }

  .oj-navbar-logo {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    cursor: pointer;
    object-fit: contain;
    margin-right: 59px;
  }

  .oj-navbar-menu {
    // margin-left: 18px;
    width: 600px;
    border: none;
    background: transparent; /* 菜单容器背景透明 */

    .el-menu-item {
      font-size: 16px;
      font-weight: 500;
      background-color: transparent !important;
      background: transparent !important; /* 确保背景透明 */
      transition: none;
      border: none;
      line-height: 60px;
    }

    /* 移除所有可能的背景色 */
    .el-menu-item:hover,
    .el-menu-item:focus,
    .el-menu-item:active,
    .el-menu-item.is-active {
      background-color: transparent !important;
      background: transparent !important;
    }
  }

  .oj-navbar-users {
    display: flex;
    align-items: center;
  }

  .oj-navbar-login-btn {
    line-height: 60px;
    display: inline-block;
    font-family:
      PingFangSC,
      PingFang SC;
    font-weight: 400;
    font-size: 18px;
    color: #222222;
    text-align: center;
    cursor: pointer;

    .line {
      display: inline-block;
      width: 25px;
    }
  }

  .oj-message {
    cursor: pointer;
  }

  .oj-head-image {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #f0f0f0;
    transition: all 0.3s ease;
    
    &:hover {
      border-color: #409eff;
      transform: scale(1.05);
    }
  }

  .oj-navbar-avatar {
    cursor: pointer;
    margin-left: 15px;
    display: flex;
    align-items: center;
    padding: 4px;
    border-radius: 50%;
    transition: all 0.3s ease;
    
    &:hover {
      background-color: rgba(64, 158, 255, 0.1);
    }
  }

  .oj-navabar-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 32px;
  }
}
</style>
